<template>
  <div class="site-content site-content--home">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="150px">
      <el-form-item label="网站名称" prop="webName">
        <el-input v-model="dataForm.webName" placeholder="网站名称"></el-input>
      </el-form-item>
      <el-form-item label="网站域名" prop="webHost">
        <el-input v-model="dataForm.webHost" placeholder="网站域名"></el-input>
      </el-form-item>
      <el-form-item label="网站描述" class="webDesc">
        <editor :init="editorInit" v-model="dataForm.webDesc"/>
      </el-form-item>
      <el-form-item label="备案信息" prop="webRecord">
        <el-input v-model="dataForm.webRecord" placeholder="备案信息"></el-input>
      </el-form-item>
      <el-form-item label="网站logo" prop="webLogo">
        <el-upload
          class="avatar-uploader"
           :action="url"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="dataForm.webLogo" :src="dataForm.webLogo" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="网站icon" prop="webIcon">
        <el-upload
          class="avatar-uploader"
          :action="url"
          :show-file-list="false"
          :on-success="handleAvatarSuccessIcon"
          :before-upload="beforeAvatarUpload">
          <img v-if="dataForm.webIcon" :src="dataForm.webIcon" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="网站入口域名" prop="webRuHost">
        <el-input v-model="dataForm.webRuHost" placeholder="网站入口域名"></el-input>
      </el-form-item>
      <el-form-item label="网站跳转域名" prop="webForwardHost">
        <el-input v-model="dataForm.webForwardHost" placeholder="网站跳转域名（pc端访问跳转到此地址）"></el-input>
      </el-form-item>
      <el-form-item label="广告手机端限制" prop="webOpenType">
        <el-select v-model="dataForm.webOpenType" placeholder="请选择">
          <el-option
            v-for="item in webOpenTypes"
            :key="item.webOpenType"
            :label="item.label"
            :value="item.webOpenType">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="ip扣量比例" prop="ipBuckle">
        <el-select v-model="dataForm.ipBuckle" placeholder="请选择">
          <el-option
            v-for="item in ipBuckles"
            :key="item.ipBuckle"
            :label="item.label"
            :value="item.ipBuckle">
          </el-option>
        </el-select>
      </el-form-item>

        <el-form-item label="邀请码放开状态" prop="yqcodeType">
          <el-select v-model="dataForm.yqcodeType" placeholder="请选择">
            <el-option
              v-for="item in yqcodeTypes"
              :key="item.yqcodeType"
              :label="item.label"
              :value="item.yqcodeType">
            </el-option>
          </el-select>
        </el-form-item>
      <el-form-item label="新用户站点个数 " prop="webOpenSite">
        <el-select v-model="dataForm.webOpenSite" placeholder="请选择">
          <el-option
            v-for="item in webOpenSites"
            :key="item.webOpenSite"
            :label="item.webOpenSite"
            :value="item.webOpenSite">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="新用户广告位个数" prop="webOpenAdv">
        <el-select v-model="dataForm.webOpenAdv" placeholder="请选择">
        <el-option
          v-for="item in webOpenAdvs"
          :key="item.webOpenAdv"
          :label="item.webOpenAdv"
          :value="item.webOpenAdv">
        </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="广告特别提示" prop="webAdvHigh">
        <el-input  type="textarea"  :rows="3" v-model="dataForm.webAdvHigh" placeholder="展示页面最底部显示的文字内容信息"></el-input>
      </el-form-item>
      <el-form-item label="提示字体大小" prop="webAdvSize">
        <el-input v-model="dataForm.webAdvSize" placeholder="展示页面最底部显示的文字内容信息字体大小"    width="80"></el-input>
      </el-form-item>
      <el-form-item label="提示颜色" prop="webAdvColor">
        <el-color-picker v-model="dataForm.webAdvColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="分页展示条数" prop="webPageSize">
        <el-select v-model="dataForm.webPageSize" placeholder="请选择">
          <el-option
            v-for="item in webPageSizes"
            :key="item.webPageSize"
            :label="item.webPageSize"
            :value="item.webPageSize">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </div>
</template>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .webDesc .el-form-item__content {
     line-height: 10px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  import Editor from '@tinymce/tinymce-vue'
  import API from '@/api'
  import axios from 'axios'
  import requestUrl from '../../../src/api/requestUrl'
  export default {
    components: { Editor },
    data () {
      return {
        downloadLoading: false,
        editorInit: {
          language: 'zh_CN',
          convert_urls: false,
          plugins: [
            'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
          ],
          toolbar: [
            'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
            'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
          ],
          images_upload_handler: function (blobInfo, success, failure) {
            let formdata = new FormData()
            formdata.set('file', blobInfo.blob())
            axios.post(requestUrl('/sys/oss/imgUpload'), formdata).then(res => {
              console.log(res)
              success(res.data.url)
            }).catch(res => {
              failure('error')
            })
          }
        },
        visible: false,
        url: '',
        webOpenTypes: [{
          webOpenType: 0,
          label: '仅微信端打开'
        }, {
          webOpenType: 1,
          label: '所有设备打开'
        }],
        yqcodeTypes: [{
          yqcodeType: 0,
          label: '不需要邀请码注册'
        }, {
          yqcodeType: 1,
          label: '需要邀请码注册'
        }],
        webOpenSites: [{
          webOpenSite: 5
        }, {
          webOpenSite: 10
        }, {
          webOpenSite: 15
        }, {
          webOpenSite: 20
        }, {
          webOpenSite: 25
        }, {
          webOpenSite: 30
        }],
        webOpenAdvs: [{
          webOpenAdv: 10
        }, {
          webOpenAdv: 20
        }, {
          webOpenAdv: 30
        }, {
          webOpenAdv: 40
        }, {
          webOpenAdv: 50
        }, {
          webOpenAdv: 60
        }],
        webPageSizes: [{
          webPageSize: 10
        }, {
          webPageSize: 20
        }, {
          webPageSize: 30
        }, {
          webPageSize: 40
        }, {
          webPageSize: 50
        }],
        ipBuckles: [{
          ipBuckle: 10
        }, {
          ipBuckle: 20
        }, {
          ipBuckle: 30
        }, {
          ipBuckle: 40
        }, {
          ipBuckle: 50
        }],
        dataForm: {
          id: 0,
          webName: '',
          webHost: '',
          webRecord: '',
          yqcodeType: 1,
          ipBuckle: 10,
          webLogo: '',
          webIcon: '',
          webRuHost: '',
          webOpenType: 0,
          webOpenSite: '',
          webOpenAdv: '',
          webForwardHost: '',
          webAdvSize: '18',
          webDesc: '',
          webAdvHigh: '',
          webAdvColor: '#409EFF',
          webPageSize: ''
        },
        dataRule: {
          webName: [
            { required: true, message: '网站名称不能为空', trigger: 'blur' }
          ],
          webLogo: [
            { required: true, message: '网站logo不能为空', trigger: 'blur' }
          ],
          webIcon: [
            { required: true, message: '网站icon不能为空', trigger: 'blur' }
          ],
          webOpenType: [
            { required: true, message: '设备打开类型不能为空', trigger: 'blur' }
          ],
          yqcodeType: [
            { required: true, message: '邀请码类型不能为空', trigger: 'blur' }
          ],
          webOpenSite: [
            { required: true, message: '会员站点个数 5 10 不能为空', trigger: 'blur' }
          ],
          webOpenAdv: [
            { required: true, message: '用户广告个数不能为空', trigger: 'blur' }
          ],
          webAdvColor: [
            { required: true, message: '广告高亮显示颜色不能为空', trigger: 'blur' }
          ],
          webPageSize: [
            { required: true, message: '分页展示条数不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    activated  () {
      this.init(0)
      this.weblog()
    },
    methods: {
      weblog (id) {
        this.url = API.oss.upload(this.$cookie.get('token'))
        console.log(this.url)
      },
      handleImgUpload (blobInfo, success, failure) {
        let formdata = new FormData()
        formdata.set('file', blobInfo.blob())
        axios.post(requestUrl('/sys/oss/upload'), formdata).then(res => {
          success(res.data.data.url)
        }).catch(res => {
          failure('error')
        })
      },
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          API.basewebinfo.info(this.dataForm.id).then(({data}) => {
            if (data && data.code === 0 && data.basewebinfo) {
              this.dataForm.id = data.basewebinfo.id
              this.dataForm.webName = data.basewebinfo.webName
              this.dataForm.webDesc = data.basewebinfo.webDesc
              this.dataForm.webHost = data.basewebinfo.webHost
              this.dataForm.webRecord = data.basewebinfo.webRecord
              this.dataForm.webForwardHost = data.basewebinfo.webForwardHost
              this.dataForm.webLogo = data.basewebinfo.webLogo
              this.dataForm.webIcon = data.basewebinfo.webIcon
              this.dataForm.webRuHost = data.basewebinfo.webRuHost
              this.dataForm.webOpenType = data.basewebinfo.webOpenType
              this.dataForm.yqcodeType = data.basewebinfo.yqcodeType
              this.dataForm.webOpenSite = data.basewebinfo.webOpenSite
              this.dataForm.webOpenAdv = data.basewebinfo.webOpenAdv
              this.dataForm.webAdvHigh = data.basewebinfo.webAdvHigh
              this.dataForm.ipBuckle = data.basewebinfo.ipBuckle
              this.dataForm.webAdvSize = data.basewebinfo.webAdvSize
              this.dataForm.webAdvColor = data.basewebinfo.webAdvColor
              this.dataForm.webPageSize = data.basewebinfo.webPageSize
            }
          })
        })
      },
      handleAvatarSuccess (res, file) {
    //    this.dataForm.webLogo = URL.createObjectURL(file.raw)
        this.dataForm.webLogo = res.url
      },
      handleAvatarSuccessIcon (res, file) {
      //  this.dataForm.webIcon = URL.createObjectURL(file.raw)
        this.dataForm.webIcon = res.url
      },
      beforeAvatarUpload (file) {
        if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/x-icon' && file.type !== 'image/png' && file.type !== 'image/gif') {
          this.$message.error('只支持jpg、png、gif格式的图片！')
          return false
        }
        const isLt2M = file.size / 1024 / 1024 < 10
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isLt2M
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var params = {
              'id': this.dataForm.id || undefined,
              'webName': this.dataForm.webName,
              'webHost': this.dataForm.webHost,
              'webDesc': this.dataForm.webDesc,
              'webRecord': this.dataForm.webRecord,
              'webLogo': this.dataForm.webLogo,
              'webIcon': this.dataForm.webIcon,
              'webRuHost': this.dataForm.webRuHost,
              'webForwardHost': this.dataForm.webForwardHost,
              'webOpenType': this.dataForm.webOpenType,
              'yqcodeType': this.dataForm.yqcodeType,
              'webOpenSite': this.dataForm.webOpenSite,
              'webOpenAdv': this.dataForm.webOpenAdv,
              'webAdvHigh': this.dataForm.webAdvHigh,
              'ipBuckle': this.dataForm.ipBuckle,
              'webAdvSize': this.dataForm.webAdvSize,
              'webAdvColor': this.dataForm.webAdvColor,
              'webPageSize': this.dataForm.webPageSize
            }
         //   var tick = !this.dataForm.id ? API.basewebinfo.add(params) : API.basewebinfo.update(params)
            var tick = API.basewebinfo.update(params)
            tick.then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.init(0)
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
